<template>
  <div class="w-[1100px] h-[1200px] p-20 relative flex flex-col">
    <div class="flex-1">
      <div class="flex justify-center items-center">
        <div class="text-center font-semibold text-4xl flex-1">
          <div>
            {{ printObj.hisname }}
          </div>
        </div>
        <div class="absolute right-20" style="border: 2px solid #000">丨丨丨丨条形码丨丨丨丨丨</div>
      </div>
      <div class="flex justify-center items-center text-2xl">病情证明单</div>

      <div class="flex justify-between items-center w-full">
        <div class="flex-1">
          <div class="flex justify-start items-center mt-4">
            <div class="text-lg">姓名： {{ printObj.brName }}</div>
            <div class="text-lg ml-2">{{ printObj.brXb }}</div>
            <div class="text-lg ml-2">{{ printObj.brAge }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            卡号：
            <div class="flex-1">{{ printObj.brBlkh }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            打印：
            <div class="flex-1">{{ printObj.dysj }}</div>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-center pb-5 mt-2" style="border-bottom: 1px solid #000">
        <div class="flex-1">
          <div class="flex items-end w-full">
            科室：
            <div class="flex-1">{{ printObj.ksmc }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            医生：
            <div class="flex-1">{{ printObj.ysmc }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            挂号：
            <div class="flex-1">{{ printObj.ghsj }}</div>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start h-[200px]">
          主要病情及诊断：
          <div>{{ printObj.zdmc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start h-[200px]">
          建议事项：
          <div>{{ printObj.content }}</div>
        </div>
      </div>

      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex-1 items-center">单位（章）</div>
        <div class="pr-2 flex flex-1 items-center">
          医师签名：
          <div class="w-40 pt-4" style="border-bottom: 1px solid #000"></div>
        </div>
        <div class="pr-2 flex flex-1 items-center justify-end">
          日期：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.rq }}</div>
        </div>
      </div>
      <div class="mt-4">诊断证明书备注</div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const printObj = ref({})

const props = defineProps({
  printData: {
    type: Array,
    default: () => []
  }
})
watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail[0]) {
      printObj.value = props.printData.printData?.detail[0]
    } else {
      printObj.value = {}
    }
  }
)
</script>
<style lang="less" scoped>
table tr td {
  height: 35px;
  padding: 10px;
  border: 1px solid #000;
}
</style>
